<template>
  <div class="container" style="padding: 20px">
    <div v-if="allQuestions !== undefined && allQuestions.length > 0">
      <div v-if="radioQuestuins.length > 0">
        <p class="question-type">单选题：</p>
        <el-row class="question-item" v-for="radios in radioQuestuins" :key="'show_paper' + radios.id">
          <el-row
            ><el-col
              ><span class="question-title">
                <el-tag size="small">{{ radios.score + "分" }}</el-tag
                >&nbsp;{{ radios.titleDetail }}</span
              ></el-col
            ></el-row
          >
          <el-row v-if="radios.imgList !== '' && radios.imgList !== null && radios.imgList !== 'null'" class="imgList-group" :style="{display: imgIsLoad === true ? '' : 'none'}">
            <el-col>
              <el-tooltip
                          v-for="(img, imgIndex) in changeImgList(radios.imgList)"
                          :key="'img-' + radios.id + imgIndex"
                          class="tooltips"
                          effect="dark"
                          content="点我查看大图"
                          placement="bottom-end"
                        >
                          <el-image
                          @load="imageLoad($event)"
                          name="questionsImgList"
                          class="imgList-item"
                            :src="changeImgList(radios.imgList)[imgIndex]"
                            :preview-src-list="changeImgList(radios.imgList)"
                          ></el-image>
                        </el-tooltip>
            </el-col>
          </el-row>
          <el-row class="question-answer"
            v-for="(selections, selectindex) in JSON.parse(radios.selectionList)"
            :key="'radio_selection_ ' + radios.id + selectindex"
          >
            <el-col>
              <el-radio v-model="radios.answer" :label="selections">
                <span class="quesiton-selection">{{ selections }}</span>
              </el-radio>
            </el-col>
          </el-row>
        </el-row>
      </div>
      <div v-if="multiQuestuins.length > 0">
        <p class="question-type">多选题：</p>
        <el-row class="question-item" v-for="multis in multiQuestuins" :key="'show_paper' + multis.id">
          <el-row
            ><el-col
              ><span class="question-title"
                ><el-tag size="small">{{ multis.score + "分" }}</el-tag
                >&nbsp;{{ multis.titleDetail }}</span
              ></el-col
            ></el-row
          >
          <el-row v-if="multis.imgList !== '' && multis.imgList !== null && multis.imgList !== 'null'" class="imgList-group" :style="{display: imgIsLoad === true ? '' : 'none'}">
            <el-col>
              <el-tooltip
                          v-for="(img, imgIndex) in changeImgList(multis.imgList)"
                          :key="'img-' + multis.id + imgIndex"
                          class="tooltips"
                          effect="dark"
                          content="点我查看大图"
                          placement="bottom-end"
                        >
                          <el-image
                          @load="imageLoad($event)"
                          name="questionsImgList"
                          class="imgList-item"
                            :src="changeImgList(multis.imgList)[imgIndex]"
                            :preview-src-list="changeImgList(multis.imgList)"
                          ></el-image>
                        </el-tooltip>
            </el-col>
          </el-row>
          <el-checkbox-group v-model="multis.answer">
            <el-row class="question-answer"
              v-for="(selections, selectindex) in JSON.parse(multis.selectionList)"
              :key="'multi_selection_ ' + selections.id + selectindex"
            >
              <el-col>
                <el-checkbox :label="selections"
                  ><span class="quesiton-selection">{{ selections }}</span></el-checkbox
                >
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-row>
      </div>
      <div v-if="tureQuestuins.length > 0">
        <p class="question-type">判断题：</p>
        <el-row class="question-item" v-for="trues in tureQuestuins" :key="'show_paper' + trues.id">
          <el-row>
            <el-col
              ><span class="question-title"
                ><el-tag size="small">{{ trues.score + "分" }}</el-tag
                >&nbsp;{{ trues.titleDetail }}</span
              ></el-col
            >
          </el-row>
          <el-row v-if="trues.imgList !== '' && trues.imgList !== null  && trues.imgList !== 'null'" class="imgList-group" :style="{display: imgIsLoad === true ? '' : 'none'}">
            <el-col>
              <el-tooltip
                          v-for="(img, imgIndex) in changeImgList(trues.imgList)"
                          :key="'img-' + trues.id + imgIndex"
                          class="tooltips"
                          effect="dark"
                          content="点我查看大图"
                          placement="bottom-end"
                        >
                          <el-image
                          @load="imageLoad($event)"
                          name="questionsImgList"
                          class="imgList-item"
                            :src="changeImgList(trues.imgList)[imgIndex]"
                            :preview-src-list="changeImgList(trues.imgList)"
                          ></el-image>
                        </el-tooltip>
            </el-col>
          </el-row>
          <el-row class="question-answer">
            <el-radio v-model="trues.answer" label="TRUE_CHOICE">正确</el-radio>
            <el-radio v-model="trues.answer" label="FALSE_CHOICE">错误</el-radio>
          </el-row>
        </el-row>
      </div>
      <div v-if="shortQuestuins.length > 0">
        <p class="question-type">简答题</p>
        <el-row class="question-item" v-for="shorts in shortQuestuins" :key="'show_paper' + shorts.id">
          <el-row
            ><el-col
              ><span class="question-title"
                ><el-tag size="small">{{ shorts.score + "分" }}</el-tag
                >&nbsp;{{ shorts.titleDetail }}</span
              ></el-col
            ></el-row
          >
          <el-row v-if="shorts.imgList !== '' && shorts.imgList !== null  && shorts.imgList !== 'null'" class="imgList-group" :style="{display: imgIsLoad === true ? '' : 'none'}">
            <el-col>
              <el-tooltip
                          v-for="(img, imgIndex) in changeImgList(shorts.imgList)"
                          :key="'img-' + shorts.id + imgIndex"
                          class="tooltips"
                          effect="dark"
                          content="点我查看大图"
                          placement="bottom-end"
                        >
                          <el-image
                          @load="imageLoad($event)"
                          name="questionsImgList"
                          class="imgList-item"
                            :src="changeImgList(shorts.imgList)[imgIndex]"
                            :preview-src-list="changeImgList(shorts.imgList)"
                          ></el-image>
                        </el-tooltip>
            </el-col>
          </el-row>
          <el-row>
          <el-col>
            <!--quill-editor 高度比 div 高度少45px-->
            <div style="height: 295px; overflow: hidden; border-bottom: 1px solid #ccc">
              <quill-editor :ref="'editor-'+ shorts.id" :styles="editorStyles" @editChange="editChange(shorts)"></quill-editor></div
          ></el-col>
        </el-row>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import QuillEditor from "../common/QuillEditor.vue";
var _this;
export default {
  components: { QuillEditor },
  props: ["allQuestions"],
  data() {
    return {
      radioQuestuins: [],
      multiQuestuins: [],
      tureQuestuins: [],
      shortQuestuins: [],
      editorStyles: {
        height: "250px",
      },
      imgIsLoad : false,
    };
  },
  methods: {
    //数据初始化
    initPaper() {
      if (this.allQuestions === undefined || this.allQuestions.length === 0) {
        return;
      }else {
      // 答案初始化 置空
      this.allQuestions.forEach((element, index) => {
        if (element.type === "MULTI_SELECT_QUESTION") {
          _this.allQuestions[index].answer = [];
        } else if (element.type === "SHORT_ANSWER_QUESTION") {
          _this.allQuestions[index].answerText = ""
          _this.allQuestions[index].answerHtml = ""
        } else {
          _this.allQuestions[index].answer = "";
        }
      });
      // 题目分组
      this.radioQuestuins = this.allQuestions.filter((item) => {
        return item.type === "RADIO_QUESTION";
      });
      this.multiQuestuins = this.allQuestions.filter((item) => {
        return item.type === "MULTI_SELECT_QUESTION";
      });
      this.tureQuestuins = this.allQuestions.filter((item) => {
        return item.type === "TRUE_FALSE_QUESTION";
      });
      this.shortQuestuins = this.allQuestions.filter((item) => {
        return item.type === "SHORT_ANSWER_QUESTION";
      });
      }
    },
    // editor监听
    editChange(question){
      question.answerHtml = this.$refs['editor-'+ question.id][0].answerHtml
      question.answerText = this.$refs['editor-'+ question.id][0].answerText
    },
    // 图片列表初始化
    changeImgList(imgListStr) {
      var temp = JSON.parse(imgListStr);
      var imgList = temp.map((x) => {
        return x.url;
      });
      return imgList;
    },
    //图片格式化
    formatteImg(){
        var imgs = document.getElementsByName('questionsImgList');
      if (imgs !== null && imgs !== undefined) {
        imgs.forEach((element) => {
          const proportion = element.height / element.width;
          if (element.height > 200) {
            element.height = 200 + "px";
            element.width = 200 / proportion + "px";
            element.style.height = 200 + "px";
            element.style.width = 200 / proportion + "px";
          } else if (element.width > 350) {
            element.width = 350 + "px";
            element.height = 350 * proportion + "px";
            element.style.width = 350 + "px";
            element.style.height = 350 * proportion + "px";
          }
        })
      }
      this.imgIsLoad = true;
    },
    // 图片加载监听函数
    imageLoad(ev){
      this.formatteImg()
    }
  },
  created() {
    _this = this;
    this.initPaper();
  },
  computed: {},
  watch: {
    allQuestions: {
      handler: (newval, oldval) => {
        _this.initPaper();
      },
    },
  },
  mounted() {
  },
};
</script>
<style scoped>
.question-item{
  margin-bottom: 8px;
  /* border-bottom: 2px solid #b9b9b9; */
}
.question-type {
  margin: 5px 0px;
  font-size: 20px;
  font-weight: 800;
}
.question-title {
  display: inline-block;
  margin: 5px 0 6px 0;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}
.quesiton-selection {
  display: inline-block;
  width: 900px;
  margin: 5px 0;
  font-size: 15px;
  vertical-align: middle;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}
/deep/.el-radio__input{
  padding-top:3px
}
/deep/.el-checkbox__input{
  padding-top:3px
}
.question-answer{
  margin-left:5px
}
.imgList-group{
  margin-bottom: 10px;
}
.imgList-item{
  margin: 0 5px;
}
</style>
